<template>
  <div class="container">
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="reorderItems">走一走</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'ReorderList',
  setup() {
    const items = ref(['帅哥', '美女', '程序猿'])

    const reorderItems = () => {
      const firstItem = items.value.shift()  // 移除第一个元素
      items.value.push(firstItem)            // 将其添加到末尾
    }

    return {
      items,
      reorderItems
    }
  }
}
</script>

<style>
.container {
  width: 450px;
  border: 1px solid #000;
  padding: 10px;
}
</style>
